<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"> 
    <!--
    Author Lu Xiaodi
    -->
    <h:head> 
        <title>IOTR</title> 

        <style type="text/css"> 

            .gritter-notice-wrapper { 
                left:200px; 
                top:50px; 
            } 
        </style> 

    </h:head> 
    <h:body>                 
        <ez:OutletManagerIOTRHeaderMenu/>

        <ez:OutletManagerIOTRTitle/>

        <ez:OutletManagerIOTRMenu/>

        <p:layout style="table-layout:auto; height:600px ">
            <p:layoutUnit position="left" header="Navigation" width="300">
                <ez:OutletManagerIOTRRMMenu/>
            </p:layoutUnit>
            <p:layoutUnit id="center"
                          position="center" header="Settings" scrollable="true">
                <h:form>
                    <p:dataTable id="areaList" var="area" 
                                 value="#{areaMgmtBean.getAllAreas()}" dynamic="true" 
                                 paginator="true" rows="5" emptyMessage="No areas have been added"
                                 rowEditListener="#{areaMgmtBean.onRowEdit}">
                        <p:column sortBy="#{area.id}" headerText="Id"> 
                            <h:outputText value="#{area.id}"/>
                        </p:column> 

                        <p:column sortBy="#{area.areaName}" headerText="Name"> 
                            <p:cellEditor>  
                                <f:facet name="output">  
                                    <h:outputText value="#{area.areaName}"/>
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText style="width:90%" value="#{area.areaName}"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column> 

                        <p:column headerText="Image"> 
                            <p:graphicImage value =" #{area.pathName}" width="100" height="100"/>
                        </p:column> 

                        <p:column headerText="Number Diners Allowed"
                                  style="width:10%">
                            <p:cellEditor>  
                                <f:facet name="output">  
                                    <h:outputText value="#{area.numDinersStr}"/>
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText style="width:90%" value="#{area.numDinersStr}"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column headerText="Edit" style="width:5px">
                            <p:rowEditor />
                        </p:column>
                        <p:column headerText="Delete" style="width:8px">
                            <p:commandButton id="removeArea" image="ui-icon ui-icon-trash" ajax="false"
                                             update="display" actionListener="#{areaMgmtBean.removeArea}"
                                             onclick="areaEdit.remove()">
                                <f:attribute name="areaId" value="#{area.id}" /> 
                            </p:commandButton>
                        </p:column>
                    </p:dataTable>
                </h:form>
                <br/>
                <br/>

                <p:panel id="addAreaPanel">

                    <h:form id="addAreaForm">
                        <h:panelGrid columns="1">
                            <h:outputLabel value="Add new area: " 
                                           style="font-size: x-large; font-weight: bold; text-align: center"/>
                            <br/>
                        </h:panelGrid>

                        <h:panelGrid columns="4" style="elevation:above" >
                            <h:outputLabel value="Area name: "/>
                            <p:inputText id="areaName" value="#{areaMgmtBean.areaName}"  
                                         required="true" style="width:45%;"/>
                            <p:message for="areaName"/>
                            <h:outputText/>
                            
                            <h:outputLabel value="Area layout: "/>
                            <h:selectManyListbox id="photo"  value="#{photoManagedBean.photoIDCollection}" required="true">
                                <f:selectItems value="#{photoManagedBean.retrievePhotoList()}"/>
                            </h:selectManyListbox>
                            <p:commandButton value ="Select and peview>>>" action="#{photoManagedBean.getSinglePhoto()}" update="pic"/>
                            <p:graphicImage id="pic" value="#{photoManagedBean.photoURLToShow}" height="150"
                                            width="150"/>
                            
                            <h:outputLabel value="Number of Diners: "
                                           style="width:50%"/>
                            <p:inputText value="#{areaMgmtBean.aNumDiner}"/>
                            <h:outputLabel value="Please enter with the form [1,2,3]"/>
                        </h:panelGrid>

                        <p:commandButton id="submitNewArea" value="Submit" ajax="false" update="display"
                                         actionListener="#{areaMgmtBean.addArea}" />
                        <br/>
                        <h:outputText style="font-weight: bold" value="Status Message: "/>
                        <h:outputText value="#{areaMgmtBean.statusMsg}"/>
                        <br/>

                    </h:form>
                </p:panel>

            </p:layoutUnit>
        </p:layout>
    </h:body> 
</html>
